<template>
  <div class="message" :class="type">
    <div class="message-content">
      <div class="message-text" v-html="formattedText"></div>
    </div>
  </div>
</template>

<script>
import {computed} from 'vue'

export default {
  props: {
    message: {
      type: Object,
      required: true,
      validator: (value) => {
        return value && ('question' in value || 'answer' in value)
      }
    },
    type: {
      type: String,
      default: 'answer'
    }
  },
  setup(props) {
    const formattedText = computed(() => {
      if (!props.message) return ''
      const text = props.type === 'question'
          ? props.message.question || ''
          : props.message.answer || ''
      return text.replace(/\n/g, '<br>')
    })

    return {
      formattedText
    }
  }
}
</script>

<style scoped>
.message {
  max-width: 80%;
  margin-bottom: 1rem;
  display: flex;
}

.message.question {
  margin-left: auto;
  justify-content: flex-end;
}

.message.answer {
  margin-right: auto;
  justify-content: flex-start;
}

.message-content {
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  line-height: 1.5;
}

.message.question .message-content {
  background-color: #1890ff;
  color: white;
  border-top-right-radius: 0.25rem;
}

.message.answer .message-content {
  background-color: #f0f0f0;
  color: #333;
  border-top-left-radius: 0.25rem;
}

.message-text {
  word-break: break-word;
}
</style>